<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
		<meta http-equiv="Cache-Control" content="no-store"/>
		<meta http-equiv="Pragma" content="no-cache"/>
		<meta http-equiv="Expires" content="0"/>
		<title>jQuery UI datepicker bug</title>
		<link rel="stylesheet" href="../jquery-ui-1.8.23.custom/css/redmond/jquery-ui-1.8.23.custom.css">
		<link rel="stylesheet" href="../jquery.jqGrid-4.4.0/css/ui.jqgrid.css">
		
		<script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="../jquery-ui-1.8.23.custom/js/jquery-ui-1.8.23.custom.min.js"></script>
		<script type="text/javascript">
		$(function() {
			$('input:eq(1)').datepicker();
			$('#initDatepickerForFirstSameId').click(function() {
				$('input:eq(0)').datepicker();
				alert('then click the second input and picke a date!!!');
			});
		});
		</script>
	</head>
	<body>
<fieldset>
	<legend>javascript code:</legend>
<pre>
$(function() {
	$('#initDatepickerForFirstSameId').click(function() {
		$('input:eq(0)').datepicker();
		alert('then click the second input and picke a date!!!');
	});
	$('input:eq(1)').datepicker();
});
</pre>
</fieldset>
		<label for="">My <font color='red'>id</font> is <b>sameId</b>: <input type="text" id="sameId" /></label>
		<button id="initDatepickerForFirstSameId">Bind Datepicker for first sameId</button>
		<b>click button, the result is same after click first or second input </b>
		<hr />
		<label for="">My <font color='red'>id</font> is <b>sameId</b> too: <input type="text" id="sameId" /></label>
		<font color='red'>click me first</font>
		<p>click the second input will occur： <b>TypeError: Cannot set property 'currentDay' of undefined</b></p>
	</body>
</html>